<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>内联元素的内外边距</title>

        <style type="text/css">
            h3 { text-align: center ; }
 
            .wrapper { margin: 50px ; border: 1px solid blue ; }

            .first>a {
                display: inline ;
                margin: 25px ;
                border: 1px solid red ;
                padding: 25px ;
                height: 50px;
            }

            .second>a {
                display: inline-block ;
                margin: 25px ;
                border: 1px solid red ;
                padding: 25px ;
                height: 50px;
                background: #ff0 content-box content-box ;
            }

        </style>

    </head>
    <body>

        <div class="wrapper first">
            <a href="http://www.163.com">网易</a>
            <a href="http://www.163.com">网易</a>
            <a href="http://www.163.com">网易</a>
        </div>

        <div class="wrapper second">
            <a href="http://www.163.com">网易</a>
            <a href="http://www.163.com">网易</a>
            <a href="http://www.163.com">网易</a>
        </div>
        
    </body>
</html>